<template>
    <div class="project-unit-group">
        <div class="title-box">
            <span class="s-tit">{{ title }}</span>
        </div>
        <div class="unit-but-box">
            <div
                class="unit-row"
                v-for="item in list"
                :key="item.id"
                :class="item.acitve ? 'acitve' : ''"
                @click="chegeUnit(item)"
            >
                <span>{{ item.title }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import goodsCtrl from "../../js/project/GoodsCtrl.js";
export default {
    name: "projectUnitGroup",
    data() {
        return {
            title: "单位",
            unit: "",
            list: [],
        };
    },
    methods: {
        initData() {
            let data = goodsCtrl.getUnitList();
            this.unit = goodsCtrl.getDatacom("unit");
            data.map((v) => {
                v.acitve = false;
            });
            this.list = data;
            if (this.unit) {
                this.list.map((v) => {
                    if (v.id == this.unit) {
                        v.acitve = true;
                    }
                });
            }
        },
        chegeUnit(item) {
            this.unit = item.id;
            this.list.map((v) => {
                if (v.id == item.id) {
                    v.acitve = true;
                } else {
                    v.acitve = false;
                }
            });
            // 准备缓存数据
            goodsCtrl.setDerData("unit", this.unit);
        },
    },
};
</script>

<style lang="scss" scoped>
.project-unit-group {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 13px;
    .title-box {
        margin-bottom: 10px;
        font-weight: bold;
    }
    .unit-but-box {
        display: flex;
        .unit-row {
            cursor: pointer;
            margin-right: 10px;
            padding: 4px 20px;
            border-radius: 5px;
            border: 1px #3989fc solid;
            display: flex;
            justify-content: center;
            align-items: center;
            &.acitve {
                background: #3989fc;
                color: #fff;
            }
            span {
            }
        }
    }
}
</style>